<template>
  <div class="">
    <button type="button" class="btn btn-warning" @click="getCity()">签到</button>

    <time></time>
    <p v-show="!data.isShow">今天还没签到哟~抓紧签到呀！</p>
    <p v-show="data.isShow">{{ data.city }}</p>
  </div>

</template>

<script setup>
import { nextTick, reactive } from 'vue'
import { MP } from "@/assets/js/map.js"
import axios from 'axios';

const aaa = "广东省深圳市宝安区..."

const data = reactive({
  ak:'URmfqivDsNjSEQ3tlXdEB8HOr7Fi6rOI',//秘钥

  city:'正在定位...',
  isShow: false
})

const getCity = ()=> {
  let timer = null
  data.isShow = true
  nextTick(()=>{
    MP(data.ak).then(BMap=> {
      //在此调用api
      var geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(function(a){
        data.city = a.address.province + a.address.city
        if (aaa.includes(a.address.city)) {
            data.city = "签到成功！"
        }else {
            data.city = "请重连网络或打开定位，重新签到"
            timer = setTimeout(()=> {
              data.isShow = false
              data.city = "正在定位..."
            },10000)
        }
        // console.log(a.address)
      })
    })
  })

}

const getTime =()=> {
  axios.get('http://127.0.0.1:9001/test/time.php', {
    params: {
      "name": localStorage.getItem("token")
    }
  }).then(re=> {
    // console.log(re.data[0]);
    let item = re.data[0]
    data.startDate = item.start_date.date.slice(0,10)
    data.endDate = item.end_date.date.slice(0,10)
  }).catch(e=> {
    console.log(e);
  })
}
getTime()



</script>

<style scoped>
</style>